import React, { useEffect, useState } from 'react';
import type { FC } from 'react';
import { useSearchParams } from 'react-router-dom';
import './index.css';
import request from '../../api/axios';

const MedicineDetail: FC = () => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');
  const [detail, setDetail] = useState<any | null>(null);

  useEffect(() => {
    const fetchDetail = async () => {
      if (!id) return;
      // TODO: 替换为真实药品详情接口
      // 这里先请求列表接口作为占位或返回假数据
      try {
        const data = await request.get(`/api/health/share/knowledgeBase/v1/findDrugsKnowledge?id=${id}`);
        setDetail(data?.data?.result || null);
      } catch {
        setDetail(null);
      }
    };
    fetchDetail();
  }, [id]);

  return (
    <div className="conmon-container detail-container">
      <div className="conmon-header">
        <div></div>
        <div></div>
      </div>
      <div className="conmon-main detail-main">
        <div className="detail-title">
          {detail?.drugsName || '药品详情'}
        </div>
        <div className="detail-disclaimer">
          本模块知识仅供参考，如有需要，请在医生指导下使用
        </div>

        <Section title="[药品成分]" text={detail?.component || '—'} />
        <Section title="[用药禁忌]" text={detail?.taboo || '—'} />
        <Section title="[功能主治]" text={detail?.effect || '—'} />
        <Section title="[用法用量]" text={detail?.usage || '—'} />
        <Section title="[药品性状]" text={detail?.shape || '—'} />
        <Section title="[包装规格]" text={detail?.packing || '—'} />
        <Section title="[不良反应]" text={detail?.sideEffects || '—'} />
        <Section title="[贮藏条件]" text={detail?.storage || '—'} />
        <Section title="[注意事项]" text={detail?.minMatter || '—'} />
        <Section title="[批准文号]" text={detail?.approvalNumber || '—'} />
      </div>
    </div>
  );
};

const Section: React.FC<{ title: string; text: string }> = ({ title, text }) => {
  return (
    <div className="detail-section">
      <div className="detail-section-title">{title}</div>
      <div className="detail-section-content">{text}</div>
    </div>
  );
};

export default MedicineDetail;



